<template>
  <div class="account">
    <SetItem title="版本号">
      <template #pro>
        <div class="versionDiv">v{{ version }}</div>
      </template>
    </SetItem>
    <el-popconfirm :width="200" hide-icon title="确认注销登录？" confirm-button-text="确定" cancel-button-text="取消" @confirm="logout">
            <template #reference>
              <div class="logoutBtn">注销登录</div>
            </template>
        </el-popconfirm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { isElectron } from "@/utils";
import { userLogoutService } from "@/utils/api.ts";
import SetItem from "./setItem.vue";
import config from '../../../../package.json'

const router = useRouter();
export default defineComponent({
  name: "",
  components: {
    SetItem,
  },
  setup() {
    const dateStr = localStorage.getItem("dateNow");
    const version = config.version+'.'+dateStr;
    async function logout() {
      let info = await userLogoutService();
      if (info.code === '0') {
        localStorage.clear();
        if (isElectron()) {
          const { ipcRenderer } = require("electron");
          await ipcRenderer.invoke("isLogout");
        } else {
          router.push("/login");
        }
      }

    }
    return {
      logout,
      version
    };
  },
});
</script>
<style scoped lang="scss">
.account {
  padding: 20px;
  padding-top: 0;

  .logout {
    top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8001b;
    margin-top: 20px;
    cursor: pointer;
  }
}

.versionDiv {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  width: 150px;
  text-align: right;
  color: #999999;
  line-height: 20px;
}

.logoutIcon {
  cursor: pointer;
  height: 14px;
}

.logoutBtn {
  padding: 10px 0;
  text-align: center;
  color: red;
  font-size: 14px;
  cursor: pointer;
}
</style>
